<template>
  <view class="goods">
    <!-- 搜索 -->
    <view class="search">
      <view class="search-input">
        <icon class="search-icon" type="search" size="16"></icon>
        {{keyword}}
      </view>
    </view>
    <!-- 筛选按钮 -->
    <view class="data-screening">
      <block v-for="(item,index) in tabList" :key="index">
        <view class="data-screening-item" :class="{active:index==tabIndex}" @tap='tabCss(index)'>{{item}}</view>
      </block>
    </view>
    <!-- 商品列表 -->
    <view class="goodsList">
      <block v-for="(item,index) in goodsList" :key='index'>
      <view class='goodsList-item' @tap='gooddDetail(item.goods_id)'>
        <image mode='widthFix' :src="item.goods_small_logo"></image>
        <view class="goodsList-item-right">
          <view class="goodsList-item-right-detail">{{item.goods_name}}</view>
          <view class="goodsList-item-right-price">￥{{item.goods_price}}.00</view>
        </view>
      </view>
      </block>
    </view>
    <!-- 最后的嘤嘤怪 -->
    <view class="loading" v-show="isLoad==false">
      嘤嘤嘤，人家没有了啦！
    </view>
  </view>
</template>

<script>
import {goodsLsit} from '@/api'
export default {
  data() {
    return {
      keyword: '',
      //筛选按钮的数据
      tabList: ['综合', '销量', '价格'],
      tabIndex: 0,
      pagenum:1,
      pagesize:20,
      /* 商品数据 */
      goodsList:[],
      //是否继续上拉请求数据
      isLoad:true
    }
  },
  /* 小程序的生命周期函数 需要使用获取参数 主要是onLoad(query)有一个默认的参数对象 */
  onLoad(query) {
    // console.log(query)
    this.keyword = query.keyword
    //本来在这请求数据 初始化请求的 但是我们在点击其他品牌跳转过来的时候 它不会再发送请求 但是onload这个函数还是会执行 就是不发送请求 所以放到我们的onshow函数去请求数据
    // console.log('onload')
  },
  //上拉加载 这是小程序里跟生命周期平级的函数 在框架的注册页面处
  onReachBottom(){
   
    this.init()
  },
  //下拉刷新
  onPullDownRefresh(){
    // console.log(1111)
    //可以封装起来下面的代码 
    //先清空 上拉加载的数据 进行初始化数据
     this.pagenum = 1
     this.goodsList=[]
     this.isLoad=true
     //再请求数据
     this.init()
  },
  onShow() {
    //先清空之前的数据 再发送请求
    this.pagenum = 1
    this.goodsList=[]
    this.isLoad=true
     //再请求数据
    //发送请求 请求商品列表页
    this.init()
    // console.log('onshow')
  },
  onReady() {
    console.log('onready')
  },
  methods: {
    /* 切换需要激活的筛选按钮 */
    tabCss(index){
      this.tabIndex = index
    },
    //页面的初始化
    init(){
      //判断我请求过来的数据是不是大于我的pagesize 我们在上拉的时候就不再请求数据了
      wx.showLoading({
        title: '加载中',
      })
      if(!this.isLoad){
        return;
      }
      goodsLsit({
      query:this.keyword,
      pagenum:this.pagenum,
      pagesize:this.pagesize
    })
      .then(res=>{
        console.log(res)
        let {goods} = res.data.message
        //为商品列表添加数据 渲染  用展开运算符将我们的数据拼接在一块
        this.goodsList = [...this.goodsList,...goods]
        //请求成功后 让我们的页码数++
        this.pagenum+=1
        //如果不足我们的pagesize我们就将我们的isLoad状态更改
        if(goods.length<this.pagesize){
          this.isLoad=false
        }
        //下拉刷新成功就停止那个加载动画
        wx.stopPullDownRefresh()
        //隐藏loading框
        wx.hideLoading()
      })
    },
    //跳转到详情页面
    gooddDetail(goods_id){
      //跳转
      wx.navigateTo({
        url:`/pages/good_detail/main?goods_id=${goods_id}`
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.search {
  background-color: #eee;
  padding: 16rpx 20rpx;
}
.search-input {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 10rpx;
  color: #bbb;
  font-size: 24rpx;
  padding: 10rpx 0;
}
.search-icon {
  margin-right: 16rpx;
}
.data-screening {
  display: flex;
  line-height: 100rpx;
  border-bottom: 1px solid #ccc;
  &-item {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    font-weight: 600;
    &.active {
      color: red;
    }
  }
}
.goodsList{
  padding-left:20rpx; 
  &-item{
    display: flex;
    padding: 15rpx 0;
    border-bottom: 1px solid #eee;
    image{
      display: block;
      width: 200rpx;
      height: 200rpx;
    }
    &-right{
      /* 我们记得右边要给flex：1占一份 图片那边固定 */
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-left:20rpx; 
      &-detail{
        // display: box;
/*         line-clamp: 2;
         超出部分直接用省略号 
        overflow: hidden;
        //强制文字不换行不换行
        // white-space: nowrap;
        该属性适用于块级和行内块不合适行内 
        text-overflow: ellipsis;
        box-orient: vertical; */
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 30rpx;
        color: #333;
      }
      &-price{
        color: rgb(241, 36, 36);
        font-size: 28rpx;
      }
    }
  }
}
.loading{
  color: #ccc;
  text-align: center;
  line-height: 80rpx;
  font-size: 24rpx;
}
</style>


